<!-- <script lang = "ts" setup>

// console.log(localStorage.getItem("registertype"))
// setInterval(() => {
//   console.log(localStorage.getItem("registertype"))
// }, 5000)
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
import { reactive, ref } from 'vue'

const fileList_cover = ref<UploadUserFile[]>([

])

const fileList_pic = ref<UploadUserFile[]>([
])
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
}

</script> -->


<script>
import axios from "axios";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      fileList: [],
      regContent: {
        name: "",
        nick: "",
        profile: "",
        sch_No: "",
        gender: "",
        insit: "",
        selfIntro: "",
        phoneNo: "",
        qqNo: "",
        wechatNo: "",
        pswd: "",
        thumbActive: [] //与论坛配合，添加存储已点赞帖子的id数组
      },
      ruleForm: {
        username: "",
        nickname: "",
        pass: "",
        checkPass: "",
        name: "",
        phoneNo: "",
        touxiang: ""
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        touxiang: [{ required: true, message: "请上传头像", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phoneNo: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ]
      },
      options: [
        {
          value: 1,
          label: "男"
        },
        {
          value: 0,
          label: "女"
        }
      ]
    };
  },

  methods: {
    submitForm(formName) {
      this.ruleForm.touxiang = this.regContent.profile
      this.$refs[formName].validate(async valid => {
        if (valid) {
          //注册函数
          this.regContent.sch_No = this.ruleForm.username;
          this.regContent.nick = this.ruleForm.nickname;
          this.regContent.pswd = this.ruleForm.pass;
          this.regContent.name = this.ruleForm.name;
          this.regContent.phoneNo = this.ruleForm.phoneNo;
          this.regContent.gender = this.options.value == 1 ? "男" : "女"; //url改成后端
          this.regContent.name = this.ruleForm.name
          this.regContent.phoneNo = this.ruleForm.phoneNo
          let regContent_form = new FormData();
          regContent_form.append("sch_No", this.regContent.sch_No)
          regContent_form.append("name", this.regContent.name)
          regContent_form.append("nick", this.regContent.nick)
          regContent_form.append("password", this.regContent.pswd)
          regContent_form.append("confirm_password", this.regContent.pswd)
          regContent_form.append("gender", this.regContent.gender)
          regContent_form.append("insit", this.regContent.insit)
          regContent_form.append("profile", this.regContent.profile)
          regContent_form.append("selfIntro", this.regContent.selfIntro)
          regContent_form.append("wechatNo", this.regContent.wechatNo)
          regContent_form.append("qqNo", this.regContent.qqNo)
          regContent_form.append("phoneNo", this.regContent.phoneNo)
          // regContent_form.append("sch_No", "2213712861")
          // regContent_form.append("name", "秦姐")
          // regContent_form.append("nick", "ye")
          // regContent_form.append("password", "123456")
          // regContent_form.append("confirm_password", "123456")
          // regContent_form.append("gender", 1)
          // regContent_form.append("insit", 1)
          // regContent_form.append("phoneNo", "13863286908")
          if (localStorage.getItem("registertype") === "junren") {
            const reg = await axios.post(
              "http://8.130.46.21:8000/soldier/register/",
              regContent_form
            ).then(res => {
              if (res.data.code == "200") {
                this.$message.success("注册成功");
                setTimeout(() => {
                  this.$router.push("/Login");
                }, 2000);
              } else {
                this.$message.error("注册失败");
                alert(res.data.error)
              };
            });
          }
          else if (localStorage.getItem("registertype") === "putongren") {
            const reg = await axios.post(
              "http://8.130.46.21:8000/stu/register/",
              regContent_form
            ).then(res => {
              if (res.data.code == "200") {
                this.$message.success("注册成功");
                setTimeout(() => {
                  this.$router.push("/Login");
                }, 2000);
              } else {
                this.$message.error("注册失败");
                alert(res.data.error)
              }
            });
          }
        } else {
          this.$message.error("注册失败");
          return false;
        }
      });
    },
    returnBack() {
      this.$router.push("/FirstPage");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    HandleSuccess(res) {
      this.regContent.profile = res
    }
  }
};
</script>


<template>
  <div class="kbody" style="padding-right:20px">
    <div @click="returnBack()" class="back">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-left" />
      </svg>
    </div>
    <div class="register-container">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="register-ruleForm">
        <h2 class="register-title" style="text-align:center">注册</h2>
        <br />
        <el-form-item label="学号" prop="username" class="biaoqian">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="ruleForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <!-- <el-form-item label="profile">
   </el-form-item> -->
        <el-form-item label="头像">
          <el-input v-model="this.regContent.profile" disabled />
          <el-upload class="upload-demo" action="http://8.130.46.21:8000/pic/upload/" :on-preview="handlePreview"
            :on-remove="handleRemove" :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed"
            :auto-upload="true" :file-list="fileList" :on-success="HandleSuccess">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip" style="color: aliceblue;">&nbsp&nbsp&nbsp只能上传jpg/png文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="书院">
          <el-input v-model="regContent.insit" placeholder="不愿提供则填无"></el-input>
        </el-form-item>
        <el-form-item label="自我介绍">
          <el-input v-model="regContent.selfIntro" placeholder="不愿提供则填无"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="phoneNo">
          <el-input v-model="ruleForm.phoneNo"></el-input>
        </el-form-item> <el-form-item label="QQ">
          <el-input v-model="regContent.qqNo" placeholder="不愿提供则填无"></el-input>
        </el-form-item>
        <el-form-item label="微信">
          <el-input v-model="regContent.wechatNo" placeholder="不愿提供则填无"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="options.value" placeholder="请选择性别">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item style="padding-left: 15%">
          <el-button class="submit" type="primary" @click="submitForm('ruleForm')">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.register-title{
  padding-left:10%
}
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: white;
  overflow: hidden;
}

.kbody {
  margin: auto;
  padding-top: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../assets/textfreebgp.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: auto;
}

.back {
  font-size: 18px;
}

.register-container {
  color: azure;
}

.submit {
  width: 40%;
}
</style>

<style>
.register-ruleForm .el-form-item__label {
  color: #f2f2f2;
}
</style>
